<!--
 * @author  hemengxia
 预览活动详情
-->
<template>
  <div class="game-activity-preview">
    <el-dialog
      v-el-drag-dialog
      :close-on-click-modal="false"
      :visible.sync="state"
      title="预览"
      width="395px"
      center
      :before-close="handleCancel"
    >
      <div v-if="redpacketActivityType == 'REDPACT2'" class="preview-container">
        <section v-if="showPage ==1" class="guess-content-index">

          <section class="bg-content" :style="{ 'background-color': detailInfo.backgroundColor }">
            <el-image class="content-top-bg" :src="view+detailInfo.backgroundImageId" />
            <el-image class="content-bottom-bg" :src="view+detailInfo.backgroundTwoImageId" />
          </section>
          <section class="join-record" @click="toRecord">中奖记录</section>
          <section class="detail-content">
            <p class="time">活动时间：{{ detailInfo.activityStartDatetime }}至{{
              detailInfo.activityEndDatetime
            }}</p>
            <section class="btn-content" :class="{'end':(detailInfo.state == '2')}">
              <section class="btn">开始游戏</section>
              <section class="btn">进入抽奖<span v-if="detailInfo.num>0">({{ detailInfo.num }})次</span>
              </section>
            </section>
            <section class="statistics-content">
              <section class="info">
                <p>参与人次：<span class="din-front">{{ detailInfo.joinCount || 0 }}</span></p>
              </section>
              <section class="info">
                <p>中奖人次：<span class="din-front">{{ detailInfo.drawCount || 0 }}</span></p>
              </section>

            </section>
            <section class="rule-content">
              <img class="rule-title" src="../../images/index/rule-title.png" alt="">
              <article v-html="detailInfo.activityExplain" />
            </section>
          </section>
        </section>

        <section
          v-else-if="showPage ==2"
          class="lottery-record-index"
          :style="{ 'background-color': detailInfo.backgroundColor }"
        >
          <section class="header-content">
            <img class="back" src="../../images/index/back-b.png" @click="showPage =1">
            <span class="title">中奖记录</span>
          </section>
          <img :src="view+detailInfo.backgroundTwoImageId" class="page-bg">
          <section class="record-container">
            <section class="record-main">
              <p class="name">{{ detailInfo.name }}</p>
              <img src="../../images/index/icon.png" alt="">
              <dl>
                <dt>
                  <span>中奖金额</span>
                  <span>中奖时间</span>
                </dt>
                <section>
                  <dd v-for="(item, index) in recordList" :key="index">
                    <span><i>￥</i>{{ item.price }}</span>
                    <span>{{ item.crtTime }}</span>
                  </dd>
                </section>
              </dl>
            </section>
          </section>
          <section>
            中奖记录
          </section>
        </section>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="handleCancel()">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { get } from './api'
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
export default {
  name: 'GameActivityPreview',
  directives: { elDragDialog },
  props: {
    id: {
      type: String,
      default: ''
    },
    redpacketActivityType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      state: true,
      view: '/API-DOCUMENT/document/file/download?id=',
      detailInfo: {
        backgroundColor: '#fff'
      },

      showPage: 1, // 1是首页 2 是中奖记录页
      recordList: [
        {
          price: '100',
          crtTime: '2020-01-01 12:00:00'
        }, {
          price: '100',
          crtTime: '2020-01-01 12:00:00'
        }, {
          price: '100',
          crtTime: '2020-01-01 12:00:00'
        }, {
          price: '100',
          crtTime: '2020-01-01 12:00:00'
        }, {
          price: '100',
          crtTime: '2020-01-01 12:00:00'
        }, {
          price: '100',
          crtTime: '2020-01-01 12:00:00'
        }, {
          price: '100',
          crtTime: '2020-01-01 12:00:00'
        }, {
          price: '100',
          crtTime: '2020-01-01 12:00:00'
        }, {
          price: '100',
          crtTime: '2020-01-01 12:00:00'
        }, {
          price: '100',
          crtTime: '2020-01-01 12:00:00'
        }
      ]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    /**
     * 参与情况
     * */
    toRecord() {
      this.showPage = 2
    },
    /**
     * 根编辑回显
     */
    getData() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        get({ id: this.id }).then(res => {
          loading.close()
          this.detailInfo = res.data.data
          if (this.detailInfo.activityStartDatetime) {
            this.detailInfo.activityStartDatetime = this.detailInfo.activityStartDatetime.substring(0, 10)
          }
          if (this.detailInfo.activityEndDatetime) {
            this.detailInfo.activityEndDatetime = this.detailInfo.activityEndDatetime.substring(0, 10)
          }
          if (this.detailInfo.activityExplain) {
            this.detailInfo.activityExplain = this.detailInfo.activityExplain.replace(/\n/g, '<br/>').replace(/\s/g, '&nbsp;')
          }
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    },
    handleCancel() {
      this.$emit('closeSet')
    }
  }
}
</script>

<style lang="scss">

.game-activity-preview {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;

  .preview-container {
    height: 80vh;
    position: relative;
    min-height: 724px;

    .guess-content-index {
      position: absolute;
      text-align: center;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;

      &::-webkit-scrollbar {
        width: 0;
        height: 0;
        color: transparent;
      }

      .bg-content {
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        min-height: 724px;
        right: 0;

        .content-top-bg {
          width: 100%;
          height: auto;
        }

        .content-bottom-bg {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: auto;
        }
      }

      .join-record {
        z-index: 1;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        position: absolute;
        width: 75px;
        height: 31px;
        line-height: 31px;
        font-size: 13px;
        font-weight: bold;
        text-align: center;
        color: #e4ba83;
        right: 0;
        top: 37px;
        background-color: rgba(0, 0, 0, 0.4);
        cursor: pointer;
      }

      .detail-content {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;

        .time {
          font-size: 13px;
          font-weight: bold;
          text-align: center;
          color: #ffffff;
          text-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.30);
          margin-top: 173px;
        }

        .btn-content {
          margin-top: 27px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 22px;

          .btn {
            width: 162px;
            height: 62px;
            line-height: 62px;
            text-align: center;
            font-size: 17px;
            font-weight: bold;
            color: #a10a06;
            background: url("../../images/index/btn-bg.png") no-repeat;
            background-size: 100% 100%;

            span {
              font-size: 14px;
            }
          }

          &.end {
            .btn {
              background: url("../../images/index/disable-btn-bg.png") no-repeat;
              background-size: 100% 100%;
              color: #fff;
            }
          }

        }

        .statistics-content {
          background-color: rgba(0, 0, 0, 0.15);
          border: solid 1px rgba(255, 255, 255, 0.15);
          border-radius: 8px;
          height: 40px;
          line-height: 40px;
          margin: 15px auto 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 320px;

          .info {
            width: 50%;
            text-align: center;

            p {
              font-size: 13px;
              font-weight: 400;
              color: #ffffff;
            }
          }
        }

        .rule-content {
          margin: 22px auto 0;
          width: 320px;
          height: 310px;
          background: #f4d2ab;
          border-radius: 10px;
          padding: 9px 15px;

          .rule-title {
            width: 201px;
            height: 55px;
          }

          article {
            line-height: 2;
            height: 213px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            color: #995b0b;
            text-align: left;
            font-size: 13px;
            font-weight: 400;

            &::-webkit-scrollbar {
              width: 0;
              height: 0;
              color: transparent;
            }
          }
        }
      }

    }

    .lottery-record-index {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: relative;
      padding-bottom: 159px;

      .header-content {
        background-color: #fff;
        padding: 0 15px;
        display: flex;
        align-items: center;
        position: relative;
        height: 44px;
        line-height: 44px;
        z-index: 3;

        .back {
          width: 11px;
          height: 19px;
          cursor: pointer;
        }

        .title {
          margin: 0 auto;
          color: #333;
          font-size: 17px;
        }
      }

      .page-bg {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        z-index: 1;
      }

      .record-container {
        position: relative;
        height: 100%;
        padding-top: 20px;

        .record-main {
          position: relative;
          background-color: #fff;
          z-index: 2;
          width: 308px;
          height: 100%;
          margin: 0 auto 0;
          border-radius: 10px;
          padding: 0 12px;

          &:after {
            content: '';
            display: inline-block;
            width: 298px;
            height: 16px;
            background-color: rgba(255, 255, 255, 0.6);
            position: absolute;
            left: 7px;
            bottom: -7px;
            border-radius: 0 0 10px 10px;
          }

          &:before {
            content: '';
            display: inline-block;
            width: 286px;
            height: 16px;
            background-color: rgba(255, 255, 255, 0.6);
            position: absolute;
            left: 14px;
            bottom: -14px;
            border-radius: 0 0 10px 10px;
          }

          img {
            width: 150px;
            height: 74px;
            display: block;
            margin: 0 auto;
          }

          .name {
            font-size: 16px;
            color: #333;
            font-weight: bold;
            line-height: 45px;
            text-align: center;
            position: relative;
          }

          dl {
            position: absolute;
            top: 119px;
            bottom: 15px;
            left: 12px;
            right: 12px;
            z-index: 2;

            &:after {
              left: 0;
              right: 0;
              width: auto;
              height: 1px;
              position: absolute;
              z-index: 0;
              top: -1px;
              content: "";
              background-image: -webkit-linear-gradient(
                      bottom,
                      #ececec 50%,
                      transparent 0
              );
              background-image: linear-gradient(0deg, #ececec 50%, transparent 0);
            }

            dt {
              height: 40px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              color: #999;
              font-size: 13px;
              padding: 0 51px 0 28px;
            }

            section {
              height: 90%;
              overflow: auto;
              -webkit-overflow-scrolling: touch;
            }

            dd {
              width: 100%;
              height: 52px;
              background: #f8f8f8;
              border-radius: 6px;
              margin-bottom: 10px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              color: #999;
              font-size: 13px;
              padding: 0 10px 0 28px;
              margin-left: 0;

              span:first-child {
                font-size: 22px;
                color: #333;
                font-weight: bold;

                i {
                  font-style: normal;
                  font-size: 16px;
                }
              }

              span:last-child {
                color: #888;
                font-size: 13px;
              }
            }
          }
        }
      }

    }
  }
}
</style>
